<style scoped lang="stylus" type="text/stylus">
#appoint {
  position: relative;
  width: 100%;
  height: 100%;

  .Pudong {
    position: absolute;
    bottom: 75px;
    right: 40px;
    // width: 150px;
    // height: 35px;
    // text-align: center;
    // line-height: 35px;
    // border-radius: 5px;
    // cursor: pointer;
    // background-color: #e5e5e5;

    a {
      display: block;
      width: 100%;
      height: 100%;
      color: #fff;
    }
  }

  .PageStyle {
    position: absolute;
    bottom: 40px;
    margin-left: 26%;
  }
}

.appoint-center {
  height: calc(100% - 150px);
}

.appoint-page {
  position: relative;
  padding-top: 40px;
  height: calc(100% - 10px);
  // height 600px;
}

.time-item {
  max-width: 580px;
  margin: 0 auto;
  padding: 0px 0px 20px 26px;
  border-left: 2px solid #494e60;

  .date {
    position: relative;
    padding-bottom: 20px;

    .round {
      position: absolute;
      left: -35px;
      width: 16px;
      height: 16px;
      background-color: #292D3D;
      border: 2px solid #494e60;
      border-radius: 100%;
    }

    .date-time {
      position: relative;
      top: -5px;
      font-size: 18px;
      color: #fff;
    }
  }

  .time-list {
    .company-name {
      padding-bottom: 10px;
      font-size: 18px;
      color: #292D3D;
      font-weight: bold;
    }

    .time-list-li {
      position: relative;
      margin-bottom: 20px;
      padding: 10px 15px;
      cursor: pointer;
      background-color: #fff;

      &:hover {
        background-color: #f8f8f8;
      }

      .icon-time {
        position: relative;
        top: 3px;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 10px;
        background-color: #4A96FF;

        span {
          position: relative;
          top: -5px;
          left: 6px;
          display: inline-block;
          width: 6px;
          height: 7.5px;
          border: 1px solid #fff;
          border-top: 0;
          border-right: 0;
        }
      }
    }
  }
}

.list-con {
  padding-bottom: 20px;
  overflow: hidden;
}

.time-list .time {
  margin-bottom: 20px;
  font-size: 14px;
  color: #000000;
}

.time-list {
  .applyInfo {
    width: 100%;
    background-color: red;

    .applyInfo_left, .applyInfo_right {
      width: 44%;
      float: left;
      padding-right: 20px;
      font-size: 14px;
      color: #666;

      .title {
        padding-bottom: 6px;
        font-size: 14px;
        color: #999999;
      }

      .gov-ontact-name {
        margin-bottom: 10px;
      }
    }

    .applyInfo_right {
      width: 55%;
      float: right;

      .applyPrizesRules {
        margin-bottom: 8px;

        .applyPrizesRules_title {
          margin-bottom: 5px;
        }
      }
    }
  }
}

.time-list .right .title {
  margin-bottom: 20px;
  color: #95969e;
}

.time-list .right {
  width: 50%;
  font-size: 14px;
}

.time-list .memo-info {
  color: #55575a;
}

.time-list .triangle {
  position: absolute;
  left: -10px;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #fff;
  border-bottom: 10px solid transparent;
}

.appoint-page .nothing {
  width: 457px;
  position: relative;
  top: 50%;
  margin: 0px auto;
  font-size: 36px;
  color: #4B4F5F;
  transform: translateY(-50%);
}

.search {
  margin-left: 82%;
  margin-top: 10px;

  .title {
    font-size: 16px;
  }

  .searchBox {
    width: 200px;
    height: 33px;
    border-radius: 8px;
    border: 1px solid black;

    .form-control {
      float: left;
      width: 80%;
      height: 30px;
      padding-left: 5px;
      border-radius: 15px;
      border: 0;
      font-size: 12px;
    }

    .inquireBox {
      display: inline-block;
      width: 20%;
      height: 30px;
      cursor: pointer;

      .inquire {
        margin-left: 10px;
        line-height: 30px;
        font-size: 22px;
      }
    }
  }
}
</style>

<template>
  <div id="appoint">
    <!-- v-if="scheduleList.length" -->
    <div class="search">
      <!-- <a href="#148129">ahhahah</a> -->
      <p class="title">搜索企业</p>
      <div class="searchBox">
        <input type="text" class="form-control" placeholder="请输入想要搜索的企业名" v-model="businessName">
        <div class="inquireBox" @click='getSchedule()'>
          <Icon type="ios-search" class="inquire"></Icon>
        </div>
      </div>
    </div>
    
    <div class="appoint-center">
      <VuePerfectScrollbar class="appoint-page">
      <div class="nothing" v-if="!scheduleList.length">当你预约企业进行线下办理后此处将会自动形成时间表以作提醒之用</div>

      <div class="time-item" v-for="(item,index) in scheduleList" :key="index">
        <div class="date">
          <span class="round"></span>
          <span class="date-time">{{titleTime(getTime(item.appointmentDate,1))}}-{{item.title}}</span>
        </div>
        <ul class="time-list">
          <!-- <li class="time-list-li" @click="readApply(items.applyId)" v-for="items in item.appointments" :key="items.id"> -->
          <li class="time-list-li" @click="readApply(items.applyId)" v-for="(items,indexs) in item.appointments" :key="indexs">
            <div class="list-con">
              <div class="company-name">{{items.companyName}}</div>
              <div class="time">
                <!--<span class="icon-time"><span></span></span><span>预约时间：{{getNowFormatDate(new Date(items.appointDate).getHours(),new Date(items.appointDate).getMinutes())}}</span>-->
                <span class="icon-time">
                  <span></span>
                </span>
                <span>预约时间：{{getTime(items.appointDate)}}</span>
              </div>

              <div class="applyInfo">
                <div class="applyInfo_left">
                  <div class="title">政府对接人</div>
                  <div class="gov-ontact-name">
                    <span>{{items.governmentContact.name}}</span>
                  </div>
                  <div class="title">企业联系人</div>
                  <div class="company-ontact-name">
                    <p>{{items.companyContact.name}}</p>
                    <p class="phone">{{items.companyContact.phone}}</p>
                  </div>
                </div>

                <div class="applyInfo_right" v-if="scheduleList[0].appointments[0].policyTitle">
                  <div class="title">申请概况</div>

                  <ul v-if="item.appointments.length > 1">
                    <p class="applyPrizesRules">{{item.appointments[indexs].policyTitle}}</p>
                    <li v-for="(items,index) of item.appointments[indexs].applyPrizaInfo.applyPrizes" :key='index'>
                      <p>{{items.prizeTitle}}</p>
                    </li>
                  </ul>

                  <ul v-if="item.appointments.length<=1">
                    <li v-for="(items,index) of item.appointments" :key='index'>
                      <ul>
                        <P class="applyPrizesRules">{{items.policyTitle}}</P>
                        <li v-for="(applyPrizes,index) of items.applyPrizaInfo.applyPrizes" :key='index'>
                          <p class="applyPrizesRules_title">{{applyPrizes.prizeTitle}}</p>
                        </li>
                      </ul>
                    </li>
                  </ul>

                </div>
              </div>

              <div v-if="items.memo" class="right fl">
                <div class="title">备注信息</div>
                <div class="memo-info">{{items.memo}}</div>
              </div>
            </div>
            <span class="triangle"></span>
          </li>
        </ul>
      </div>
    </VuePerfectScrollbar>
    </div>

    <Button class="Pudong" type="primary">
      <span v-if='pdfUrl==""' @click="loaderInfo()">已预约企业名单</span>
      <a v-else :href="pdfUrl" target="_blank">已预约企业名单</a>
    </Button> 
    <Page v-if="scheduleList.length != 0" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="handlePage" @on-page-size-change="handlePageSize" :current="pageNum" class="PageStyle"></Page>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "appointDate",
  data() {
    return {
      scheduleList: [],
      hasList: [],
      pdfUrl: "",
      businessName: "",
      pageNum: 1,
      pageSize: 5,
      totalCount: 0, // 总条数
      totalPage: 0 , // 总页数
    };
  },
  computed: {
    // 服务器判断118
    server_118() {
      return [11812695244, 120236189, 17216646].includes(this._SERVER);
    },
  },
  methods: {
    titleTime(time) {
      var arr = time.split("/"),
        time = arr[1] + "月" + arr[2] + "号";
      return time;
    },
    readApply(applyId) {
      this.$router.push({
        path: "/component",
        name: "Component",
        query: {
          id: applyId,
          pageName: "预约时间表",
          name: "appointDate"
        }
      });
    },

    // 默认请求或者模糊搜索
    getSchedule() {
      if (this.businessName == "") {
        this.ajaxData(
          {
            type: "get",
            urlv2: "1",
            url: "/schedule/appointments",
            data: {
              page: this.pageNum,
              pageSize: 5
            }
          },
          (ret, all) => {
            if (all.code == 0) {
              this.scheduleList = ret;
              this.totalCount = ret[0].appointments[0].totalCount;
              if (this.server_118) {
                this.downlaodPDF();
              }
            }
          }
        );
      } else {
        this.ajaxData(
          {
            type: "get",
            urlv2: "1",
            url: "/schedule/appointments",
            data: {
              companyName: this.businessName,
              page: 1,
              pageSize: 5000
            }
          },
          (ret, all) => {
            if (all.code == 0) {
              this.scheduleList = ret;
              this.totalCount = ret[0].appointments[0].totalCount;
              this.businessName = "";
              // if (this._SERVER == 118 || this._SERVER == 120) {
                this.downlaodPDF();
              // }
            }
          }
        );
      }
    },

    handlePage(value) {
      this.pageNum = value;
      // let type = this.statisticsActiveID;
      this.ajaxData(
        {
          type: "get",
          urlv2: "1",
          url: "/schedule/appointments",
          data: {
            page: this.pageNum,
            pageSize: this.pageSize
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.scheduleList = res || [];
            this.totalCount = res[0].appointments[0].totalCount;
            // setTimeout(() => {
            //   document.querySelector(".right01-con").scrollTop =
            //     this.getRouteQuery.scrollRightTop || 0;
            //   this.$refs.policyApplyLists.update();
            // }, 10);
          }
        }
      );
    },

    handlePageSize(value) {
      this.pageSize = value;
      // let type = this.statisticsActiveID;
      this.ajaxData(
        {
          type: "get",
          urlv2: "1",
          url: "/schedule/appointments",
          data: {
            type: type,
            page: this.pageNum,
            pageSize: this.pageSize
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.scheduleList = res || [];
            this.totalCount = res[0].appointments[0].totalCount;
            // setTimeout(() => {
            //   document.querySelector(".right01-con").scrollTop =
            //     this.getRouteQuery.scrollRightTop || 0;
            //   this.$refs.policyApplyLists.update();
            // }, 10);
          }
        }
      );
    },

    loaderInfo(){
      this.$Message.info("数据比较庞大，请耐心等待！");
    },

    downlaodPDF() {
      if (this.pdfUrl == "") {
        this.ajaxData(
          {
            type: "get",
            url: "/schedule/exportAppointments",
            data: {}
          },
          res => {
            // console.log(res.fileUrl);
            this.pdfUrl = res.fileUrl;
          }
        );
      }
    }
  },
  created() {
    this.getSchedule();
  }
};
</script>
